<template>
  <div class="hello">
    <mt-navbar class="nav" v-model="selected">
      <mt-tab-item id="1">全部</mt-tab-item>
      <mt-tab-item id="2">销量</mt-tab-item>
      <mt-tab-item id="3">上新</mt-tab-item>
      <mt-tab-item id="4">价格</mt-tab-item>
    </mt-navbar>
    <mt-tab-container class="nav" v-model="selected">
      <mt-tab-container-item class="flex" v-for="(item, index) in kindList" :key="index" id="1">
        <div>
          <img :src="item.imgPic" alt="你好">
          <mt-cell :title="item.title"/>
          <mt-cell :title="item.price"/>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <mt-cell v-for="(n,index) in 4" :title="'测试 ' + n" :key="index"/>
      </mt-tab-container-item>
      <mt-tab-container-item id="3">
        <mt-cell v-for="(n,index) in 6" :title="'选项 ' + n" :key="index"/>
      </mt-tab-container-item>
      <mt-tab-container-item v-for="(item,index) in this.name" id="4" :key="index">
        <img :src="item.imgPic" alt="你好">
        <mt-cell :title="item.title"/>
        <mt-cell :title="item.price"/>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        selected: "1",
        name: [],
        kindList: [
          {
            imgPic: "../../static/images/1.jpg",
            title: '清新明媚 柔软舒适1',
            subTitle: '纯棉四件套\晨光灿烂1',
            price: '268',
          }, {
            imgPic: "../../static/images/2.jpg",
            title: '清新明媚 柔软舒适2',
            subTitle: '纯棉四件套\晨光灿烂2',
            price: '278',
          }, {
            imgPic: "../../static/images/3.jpg",
            title: '清新明媚 柔软舒适3',
            subTitle: '纯棉四件套\晨光灿烂3',
            price: '288',
          }, {
            imgPic: "../../static/images/4.jpg",
            title: '清新明媚 柔软舒适4',
            subTitle: '纯棉四件套\晨光灿烂4',
            price: '298',
          }, {
            imgPic: "../../static/images/5.jpg",
            title: '清新明媚 柔软舒适5',
            subTitle: '纯棉四件套\晨光灿烂5',
            price: '308',
          }, {
            imgPic: "../../static/images/6.jpg",
            title: '清新明媚 柔软舒适6',
            subTitle: '纯棉四件套\晨光灿烂6',
            price: '318',
          }, {
            imgPic: "../../static/images/17.jpg",
            title: '清新明媚 柔软舒适7',
            subTitle: '纯棉四件套\晨光灿烂7',
            price: '328',
          }, {
            imgPic: "../../static/images/8.jpg",
            title: '清新明媚 柔软舒适8',
            subTitle: '纯棉四件套\晨光灿烂8',
            price: '265',
          }, {
            imgPic: "../../static/images/9.jpg",
            title: '清新明媚 柔软舒适9',
            subTitle: '纯棉四件套\晨光灿烂9',
            price: '268',
          }, {
            imgPic: "../../static/images/10.jpg",
            title: '清新明媚 柔软舒适10',
            subTitle: '纯棉四件套\晨光灿烂10',
            price: '156',
          }
        ],
        kindList1: [
          {
            imgPic: "../../static/images/1.jpg",
            title: '清新明媚 柔软舒适1',
            subTitle: '纯棉四件套\晨光灿烂1',
            price: '268',
          }, {
            imgPic: "../../static/images/2.jpg",
            title: '清新明媚 柔软舒适2',
            subTitle: '纯棉四件套\晨光灿烂2',
            price: '278',
          }, {
            imgPic: "../../static/images/3.jpg",
            title: '清新明媚 柔软舒适3',
            subTitle: '纯棉四件套\晨光灿烂3',
            price: '288',
          }, {
            imgPic: "../../static/images/4.jpg",
            title: '清新明媚 柔软舒适4',
            subTitle: '纯棉四件套\晨光灿烂4',
            price: '298',
          }, {
            imgPic: "../../static/images/5.jpg",
            title: '清新明媚 柔软舒适5',
            subTitle: '纯棉四件套\晨光灿烂5',
            price: '308',
          }, {
            imgPic: "../../static/images/6.jpg",
            title: '清新明媚 柔软舒适6',
            subTitle: '纯棉四件套\晨光灿烂6',
            price: '318',
          }, {
            imgPic: "../../static/images/17.jpg",
            title: '清新明媚 柔软舒适7',
            subTitle: '纯棉四件套\晨光灿烂7',
            price: '328',
          }, {
            imgPic: "../../static/images/8.jpg",
            title: '清新明媚 柔软舒适8',
            subTitle: '纯棉四件套\晨光灿烂8',
            price: '265',
          }, {
            imgPic: "../../static/images/9.jpg",
            title: '清新明媚 柔软舒适9',
            subTitle: '纯棉四件套\晨光灿烂9',
            price: '268',
          }, {
            imgPic: "../../static/images/10.jpg",
            title: '清新明媚 柔软舒适10',
            subTitle: '纯棉四件套\晨光灿烂10',
            price: '156',
          }
        ]
      }
    },
    created() {
      this.name = this.kindList1.sort(this.compare('price'))
    },
    methods: {
      compare(prop) {
        return function (obj1, obj2) {
          var val1 = obj1[prop];
          var val2 = obj2[prop];
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .nav {
    display: flex;
  }

  .nav .mint-tab-item {
    flex: 1;
    text-align: center;
  }

  .nav .mint-tab-container-wrap {
    display: flex;
    flex-wrap: wrap;
  }

  .nav .flex {
    width: 200px;
    height: 200px;
  }

  .nav .flex img {
    width: 200px;
    height: 200px;
  }

  .nav .is-selected {
    color: red;
  }
</style>
